<template>
  <border class="goal-attainment"
          :moduleType="borderConfig.moduleType"
          :icon="borderConfig.icon"
          :titleText="borderConfig.titleText"
          :organType="borderConfig.organType"
          :goPageUrl="borderConfig.goPageUrl">
    <div class="module-content"
         slot="module-content">
      <div class="module-content-l">
        <div class="u-message">
          <message v-for="(item, index) in messageLeft"
                   :key="index"
                   :messageName="item.messageName"
                   :messageNumber="item.messageNumber"
                   :messageUnit="item.messageUnit"
                   :messageClassName="item.messageClassName"></message>
        </div>
      </div>
      <div class="module-content-r">
        <div class="u-head">
          <div class="u-info">
            <message v-for="(item, index) in messageTop"
                     :key="index"
                     messageType="text"
                     :messageName="item.messageName"
                     :messageNumber="item.messageNumber !== '' ? item.messageNumber : '--'"
                     :messageUnit="item.messageUnit"
                     :messageClassName="{'positive': Number(item.messageNumber) > 0, 'negative': Number(item.messageNumber) < 0}"></message>
          </div>
        </div>
        <div class="u-chart">
          <barLine ref="barLine"
                   :xAxis="moduleConfig.optionsConfig.xAxis"
                   :yAxis="moduleConfig.optionsConfig.yAxis"
                   :seriesData="moduleConfig.optionsConfig.series"></barLine>
        </div>
      </div>
    </div>
  </border>
</template>

<script>
import Border from './../../components/Border.vue'
import Message from './../../assetsManagement/components/Message.vue'
import barLine from './../../assetsManagement/components/BarLine.vue'
export default {
  name: 'goalAttainment',
  components: {
    Border,
    Message,
    barLine
  },
  data () {
    return {
      borderConfig: {
        moduleType: '2x1',
        icon: '',
        titleText: '目标达成概况'
      },
      moduleConfig: {
        optionsConfig: {
          xAxis: [{
            type: 'category',
            data: ['去年同月', '上月', '本月', '本年同期累计', '去年累计收入']
          }],
          yAxis: [{
            name: '价值(万元)',
            type: 'value'
          }],
          series: []
        }
      },
      messageLeft: [{
        messageName: '全年目标收入(万元)',
        messageNumber: 0,
        messageUnit: ''
      },
      {
        messageName: '累计计划收入(万元)',
        messageNumber: 0,
        messageUnit: ''
      },
      {
        messageName: '累计实际收入(万元)',
        messageNumber: 0,
        messageUnit: ''
      },
      {
        messageName: '目标收入差额(万元)',
        messageNumber: 0,
        messageUnit: '',
        messageClassName: 'negative'
      },
      {
        messageName: '计划完成率',
        messageNumber: 0,
        messageUnit: '%'
      },
      {
        messageName: '实际完成率',
        messageNumber: 0,
        messageUnit: '%'
      }],
      messageTop: [{
        messageName: '月环比',
        messageNumber: 0,
        messageUnit: '%',
        messageClassName: ''
      },
      {
        messageName: '月同比',
        messageNumber: 0,
        messageUnit: '%',
        messageClassName: ''
      },
      {
        messageName: '累计同比',
        messageNumber: 0,
        messageUnit: '%',
        messageClassName: ''
      }]
    }
  },
  computed: {
    organId () {
      return this.$store.state.organId
    }
  },
  methods: {
    getData () {
      let self = this
      // let res = {
      //   data: {
      //     "code": "0",
      //     "msg": "查询成功!",
      //     "data":{
      //       "annualTargetIncome": 1000, // "全年收入目标",
      //       "total_plan_income": 2000, // "累计计划收入",
      //       "total_income": 3000, // "累计实际收入",
      //       "planBalance": 4000,  // "累计目标差额",
      //       "planFinishRate": 0.8, // "计划完成率",
      //       "finishRate": 0.9, // "实际完成率",
      //       "nowmonthIncome": 30, // "本月收入",
      //       "lastMonthIncome": 20, // "上月收入",
      //       "sameMonthIncome": 10, // "去年同月收入",
      //       "nowYearIncome": 40, // "本年累计收入",
      //       "lastYearSameIncome": 50, // "去年同期累计收入",
      //       "monthOnMonth": 0.1, // "环比",
      //       "yearOnYear": -0.2, // "同比",
      //       "yearOnYearTotal": 0.3, // "同期累积同比"
      //     }
      //   }
      // }
      self.assetsManagementApi.targetInfo({ organId: self.organId }).then(res => {
        if (res.data.code === '0') {
          let resData = res.data.data || {}
          self.messageLeft[0].messageNumber = resData.annualTargetIncome
          self.messageLeft[1].messageNumber = resData.total_plan_income
          self.messageLeft[2].messageNumber = resData.total_income
          self.messageLeft[3].messageNumber = resData.planBalance
          self.messageLeft[4].messageNumber = resData.planFinishRate
          self.messageLeft[5].messageNumber = resData.finishRate
          self.messageTop[0].messageNumber = resData.monthOnMonth
          self.messageTop[1].messageNumber = resData.yearOnYear
          self.messageTop[2].messageNumber = resData.yearOnYearTotal
          self.moduleConfig.optionsConfig.series = []
          self.moduleConfig.optionsConfig.series = [{
            name: '',
            type: 'bar',
            data: [resData.sameMonthIncome, resData.lastMonthIncome, resData.nowmonthIncome, resData.nowYearIncome, resData.lastYearSameIncome]
          }]
        } else {
          self.$parent.showTips('请求失败，点击确认继续刷新')
        }
      }, res => {
        self.$parent.showTips('请求失败，点击确认继续刷新')
      })
    }
  },
  mounted () {
    // this.getData()
  }
}
</script>

<style lang="scss" scoped>
.goal-attainment {
  .module-content {
    width: 100%;
    height: 100%;
    &:after {
      content: ".";
      display: block;
      clear: both;
      height: 0;
      line-height: 0;
      font-size: 0;
    }

    .module-content-l {
      float: left;
      width: 39%;
      padding-left: 1%;
      overflow: hidden;
      > .u-message {
        float: left;
        width: 100%;

        .message {
          width: calc((100% - 20px) / 2);
          margin: 5px;
          float: left;
        }
      }
    }

    .module-content-r {
      float: left;
      width: 60%;
      height: 100%;

      > .u-head {
        float: left;
        width: 100%;
        > .u-info {
          float: right;
          margin-right: 20px;
          .message {
            width: auto;
            margin: 5px 2px;
            float: left;
          }
        }
      }
      > .u-chart {
        float: left;
        width: 100%;
        height: calc(100% - 30px);
      }
    }
  }
}
</style>
